<template>
	<u-popup :show="showPrivacy" round="16rpx">
		<view class="privacy-pop">
			<view class="flex align-center">
				<image :src="$mUtils.qiniu('')" class="mini-avatar"></image>
				<view class="text-df text-333">用户隐私保护提示</view>
			</view>
			<view class="mini-content">
				<view class="text-sm text-999 margin-bottom-sm">
					感谢您使用源晓退休计算器，您使用前应当阅井同意
				</view>
				<text class="text-sm text-blue" @tap="handleOpenPrivacyContract">《查看隐私协议》</text>
				<text class="text-sm text-999">
					当您点击同意并开始时用产品服务时，即表示你已理解并同息该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法进入应用。
				</text>
			</view>
			<view class="flex align-center justify-center">
				<button class="btn refuse" @tap="handleRefusePrivacyContract">拒绝</button>
				<button
					class="btn"
					open-type="agreePrivacyAuthorization"
					@agreeprivacyauthorization="handleAgreePrivacyAuthorization"
				>
					同意
				</button>
			</view>
		</view>
	</u-popup>
</template>

<script setup lang="ts">
import $mUtils from '@/common/utils'
import store from '@/store'

// 显示隐私协议
const showPrivacy = ref<boolean>(false)

// 打开授权隐私协议
function handleOpenPrivacyContract() {
	// 打开隐私协议页面
	wx.openPrivacyContract()
}

// 同意授权隐私协议
function handleAgreePrivacyAuthorization() {
	$mUtils.tip('授权成功', 'success', 800, () => {
		// 关闭弹出隐私协议
		showPrivacy.value = false
		// 刷新页面
		store.user.reLogin({ refresh: true })
	})
}

// 拒绝授权隐私协议
function handleRefusePrivacyContract() {
	uni.showModal({
		title: '温馨提示',
		content: '用户拒绝隐私授权, 未同意过的隐私协议中的接口将不能调用',
		confirmText: '忍心拒绝',
		confirmColor: '#ed6b50',
		cancelText: '再想想',
		success: res => {
			if (res.confirm) {
				// 关闭弹出隐私协议
				showPrivacy.value = false
				// 返回页面
				uni.navigateBack()
			}
		}
	})
}

onMounted(() => {
	wx.onNeedPrivacyAuthorization(() => {
		wx.getPrivacySetting({
			success: (res: any) => {
				if (res.needAuthorization) {
					// 需要弹出隐私协议
					setTimeout(() => {
						showPrivacy.value = true
						uni.hideLoading()
					}, 300)
				}
			}
		})
	})
})
</script>

<style lang="scss" scoped>
.privacy-pop {
	padding: 40rpx 30rpx;
	background-color: #ededed;
	border-radius: 16rpx 16rpx 0 0;
	.mini-avatar {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		margin: 0 20rpx 0 0;
	}
	.mini-content {
		margin: 60rpx 0;
	}
	.btn {
		color: #fff;
		width: 208rpx;
		height: 68rpx;
		margin: 0 20rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 68rpx;
		border-radius: 6rpx;
		background-color: #07c160;
		&.refuse {
			color: #07c160;
			background-color: #fff;
		}
	}
}
</style>
